<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>hello</title>
    <link rel="stylesheet" type="text/css" href="../themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="../themes/icon.css">
    <script type="text/javascript" src="../jquery.min.js">
    </script>
    <script type="text/javascript" src="../jquery.easyui.min.js">
    </script>
</head>
<script type="text/javascript">
    function qq(value,name){
        alert(value+":"+name)
    }
</script>
<body>
<div class="easyui-panel" title="My Panel"
     style="width:500px;height:150px;padding:10px;background:#fafafa;"
     data-options="iconCls:'icon-save',closable:true,
                    collapsible:true,minimizable:true,maximizable:true">
    <p>panel content.</p >
</div><!--这个是panel下拉框-->

<div id="dd" class="easyui-draggable" data-options="handle:'#title'" style="width: 100px;height: 200px">
    <div id="title" style="background: blue">title</div>
    <div id="xyz" style="width: 100px;height: 200px; background-color: pink"></div>
</div><!--这个是可移动框-->

<div id="d1" style="width: 100px;height:100px;border: 1px solid #ff0000"></div>

<input id="ss" class="easyui-searchbox" style="width:300px"
       data-options="searcher:qq,prompt:'请输入值',menu:'#mm'"></input>

<div id="mm" style="width:120px">
    <div data-options="name:'all',iconCls:'icon-ok'">All News</div>
    <div data-options="name:'sports',iconCls:'icon-ok'">Sports News</div>
</div>

<div id="p" class="easyui-progressbar" data-options="value:60" style="width: 400px;"></div>
<button id="button">click</button>

<div id="aa" class="easyui-accordion" style="width:300px;height:200px;">
    <div title="Title1" data-options="iconCls:'icon-save'" style="overflow:auto;padding:10px;">
        <h3 style="color:#0099FF;">Accordion for jQuery</h3>
        <p>Accordion is a part of easyui framework for jQuery.
            It lets you define your accordion component on web page more easily.</p >
    </div>
    <div title="Title2" data-options="iconCls:'icon-reload',selected:true" style="padding:10px;">
        content2
    </div>
    <div title="Title3">
        content3
    </div>
</div>

<div id="cc" class="easyui-layout" style="width:600px;height:400px;">
    <div data-options="region:'north',title:'North Title',split:true" style="height:100px;"></div>
    <div data-options="region:'south',title:'South Title',split:true" style="height:100px;"></div>
    <div data-options="region:'east',title:'East',split:true" style="width:100px;"></div>
    <div data-options="region:'west',title:'West',split:true" style="width:100px;"></div>
    <div data-options="region:'center',title:'center title'" style="padding:5px;background:#eee;"></div>
</div>


<a href=" " id="mb" class="easyui-menubutton"
   data-options="menu:'#mc',iconCls:'icon-edit'">Edit</a >
<div id="mc" style="width:150px;">
    <div data-options="iconCls:'icon-undo'">Undo</div>
    <div data-options="iconCls:'icon-redo'">Redo</div>
    <div class="menu-sep"></div>
    <div>Cut</div>
    <div>Copy</div>
    <div>Paste</div>
    <div class="menu-sep"></div>
    <div data-options="iconCls:'icon-remove'">Delete</div>
    <div>Select All</div>
</div>

<a href=" " id="sb" class="easyui-splitbutton"
   data-options="menu:'#mm2',iconCls:'icon-ok'" onclick="javascript:alert('ok')">Ok</a >
<div id="mm2" style="width:100px;">
    <div data-options="iconCls:'icon-ok'">Ok</div>
    <div data-options="iconCls:'icon-cancel'">Cancel</div>
</div>

<input class="easyui-switchbutton" checked>
<input class="easyui-switchbutton" data-options="onText:'Yes',offText:'No'">

<br>
<input type="text" class="easyui-textbox" value="" data-options="Label:'用户',iconCls:'icon-man'" style="width: 300px">
<br><!--用户-->
<input type="text" class="easyui-passwordbox" value="" data-options="Label:'password',iconCls:'icon-lock',showEye:false" style="width: 300px">
<br><!--密码-->



</body>
<script>
    let d1=$('#d1')
    let n=0;
    d1.resizable({maxWidth:800,maxHeight:1000})
    let button=$('#button')
    button.click(function(){
        $('#p').progressbar('setValue',n)
        n++
    })
</script>
</html>